<link rel="import" href="../../bower_components/vaadin-lumo-styles/typography.html">
<link rel="import" href="../../bower_components/vaadin-lumo-styles/sizing.html">
<link rel="import" href="../../bower_components/vaadin-lumo-styles/icons.html">
<link rel="import" href="../../bower_components/vaadin-lumo-styles/presets/compact.html">

<custom-style>
  <style>
    html {
      height: 100%;
    }

    body {
      height: 100%;
      margin: 0;
    }
  </style>
</custom-style>

<dom-module id="custom-button" theme-for="vaadin-button">
  <template>
    <style>
      :host(.delete-button) {
        padding: var(--lumo-space-xs) 0;
        margin: 0;
      }

      :host(.delete-button) ::slotted(*) {
        color: var(--lumo-contrast-60pct);
        font-size: var(--lumo-font-size-xl);
      }
    </style>
  </template>
</dom-module>

<dom-module id="custom-select" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([theme="custom"]) [part="input-field"],
      :host([theme="custom"]) [part="input-field"] {
        background-color: transparent;
      }
    </style>
  </template>
</dom-module>

<dom-module id="large-text-field-styles" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([class='large']) [part~="value"] {
        font-size: var(--lumo-font-size-xxl);
        --lumo-text-field-size: var(--lumo-size-xl);
      }
    </style>
  </template>
</dom-module>

<dom-module id="invoice-editor-form-layout-styles" theme-for="vaadin-form-item">
  <template>
    <style>
      :host {
        --vaadin-form-item-label-width: 0;
        --vaadin-form-item-label-spacing: 0;
        --vaadin-form-item-row-spacing: 20px;
      }
    </style>
  </template>
</dom-module>

<dom-module id="invoice-editor-app-styles">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
        font-family: var(--lumo-font-family);
        --vaadin-board-width-small: 1120px;
        --vaadin-board-width-medium: 1280px;
      }

      #container {
        display: flex;
        height: 100%;
        flex-direction: column;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }

      .controls-line {
        display: flex;
        flex: none;
        align-items: center;
        background: var(--lumo-contrast-5pct);
        flex-wrap: wrap;
      }

      .controls-line:first-of-type vaadin-button:not(:last-child) {
        margin-right: var(--lumo-space-s);
      }

      vaadin-board {
        flex-shrink: 0;
        padding: 0 var(--lumo-space-m);
        margin-bottom: var(--lumo-space-xl);
      }

      vaadin-form-layout {
        margin-right: var(--lumo-space-xl);
      }

      @media (max-width: 1120px) {
        vaadin-form-layout {
          margin: 0;
        }
      }

      vaadin-rich-text-editor {
        min-height: 30vh;
        max-height: 50vh;
        margin: var(--lumo-space-m) 0;
      }

      vaadin-grid-pro {
        min-height: calc(var(--lumo-size-xl) * 6);
      }

      .icon-eur::before,
      .icon-usd::before,
      .icon-gbp::before {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        margin: 0 var(--lumo-space-m);
        color: var(--lumo-base-color);
        height: calc(var(--lumo-size-m) / 2);
        width: calc(var(--lumo-size-m) / 2);
        border-radius: 50%;
      }

      .icon-eur::before {
        content: '€';
        background-color: var(--lumo-primary-color);
      }

      .icon-usd::before  {
        content: '$';
        background-color: var(--lumo-success-color);
      }

      .icon-gbp::before  {
        content: '£';
        background-color: var(--lumo-error-color);
      }

      .invoice-details {
        flex: 1;
        align-items: center;
        flex-basis: auto;
      }

      .invoice-details small {
        color: var(--lumo-secondary-text-color);
      }

      .invoice-details span {
        margin-right: var(--lumo-space-m);
      }

      .controls-line-buttons {
        padding: 0 var(--lumo-space-s);
      }

      #add-transaction span, #add-line span {
        display: flex;
        align-items: center;
      }

      #add-transaction span::before, #add-line span::before {
        font-family: 'lumo-icons';
        font-size: var(--lumo-size-s);
        content: var(--lumo-icons-plus);
      }

      .currency-selector {
        width: 90px;
      }

      .footer {
        padding-right: var(--lumo-space-m);
        font-size: var(--lumo-font-size-m);
        color: var(--lumo-body-text-color);
        justify-content: flex-end;
      }

      .footer .total {
        color: var(--lumo-header-text-color);
      }
    </style>
  </template>
</dom-module>
